<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getMca_1, getMca_2 } from '@/api'

const route = useRoute()

// tabs 数据
const pageId = ref('mca_1')
const mcaDetail = ref({
  left: {},
  right: {},
})
const pageDetail = reactive({
  mca_1: {
    left: {},
    right: {},
  },
  mca_2: {
    left: {},
    right: {},
  },
})
const getPageData = async () => {
  if (pageId.value === 'mca_1') {
    mcaDetail.value = await getMca_1()
  }
  if (pageId.value === 'mca_2') {
    mcaDetail.value = await getMca_2()
  }
}

watch(
  () => route.query,
  (newValue) => {
    if (newValue?.id) {
      pageId.value = newValue?.id
      getPageData()
    }
  },
)

onMounted(() => {
  if (route.query?.id) {
    pageId.value = route.query.id
    getPageData()
  }
})
</script>

<template>
  <div class="layout-container">
    <el-row :gutter="20">
      <el-col :span="12" class="mb-20">
        <el-card>
          <div class="intro" v-html="mcaDetail.left?.intro"></div>

          <h3 style="text-align: center" v-if="mcaDetail.left?.carousel?.title">
            {{ mcaDetail.left?.carousel?.title }} {{ mcaDetail.left?.carousel?.id }}
          </h3>
          <el-carousel v-if="mcaDetail.left?.carousel?.items?.length" height="700px">
            <el-carousel-item v-for="item in mcaDetail.left?.carousel?.items" :key="item.id">
              <a :href="item.link">
                <el-image
                  class="w-full h-full bg-white overflow-hidden"
                  :src="item.image"
                  fit="contain"
                />
              </a>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>

      <el-col :span="12" class="mb-20">
          <el-card>
            <div class="intro" v-html="mcaDetail.right?.intro"></div>
            <h3 style="text-align: center" v-if="mcaDetail.right?.carousel?.title">
              {{ mcaDetail.right?.carousel?.title }}
            </h3>
            <el-carousel v-if="mcaDetail.right?.carousel?.items?.length" height="700px">
              <el-carousel-item v-for="item in mcaDetail.right?.carousel?.items" :key="item.id">
                <a :href="item.link">
                  <el-image
                    class="w-full h-full bg-white overflow-hidden"
                    :src="item.image"
                    fit="contain"
                  />
                </a>
              </el-carousel-item>
            </el-carousel>
          </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.intro {
  margin-bottom: 20px;
}
</style>
